<script setup>
import { ref } from 'vue'
const currentPage = ref(1)
const handleSizeChange = (val) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
    console.log(`current page: ${val}`)
}
</script>
<template>
    <div class="map-list">
        <div class="ha-title">设备列表</div>
        <table>
            <thead>
                <th>摄像头名称</th>
                <th>类型</th>
                <th>状态</th>
                <th>操作</th>
            </thead>
            <tbody>
                <tr v-for="i in 7">
                    <td>
                        苏州街监控摄像头
                    </td>
                    <td>
                        固定式
                    </td>
                    <td>
                        <i style="color: #387BFF;margin-right: 6px;" class="icon iconfont icon-a-Ellipse3"></i> <span>在线</span>
                    </td>
                    <td style="color: #387BFF;">
                        <span style="margin-right: 6px;">查看</span>
                        <span>设置</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        苏州街监控摄像头
                    </td>
                    <td>
                        固定式
                    </td>
                    <td>
                        <i style="color: #F84848;margin-right: 6px;" class="icon iconfont icon-a-Ellipse3"></i> <span>离线</span>
                    </td>
                    <td style="color: #387BFF;">
                        <span style="margin-right: 6px;">查看</span>
                        <span>设置</span>
                    </td>
                </tr>
            </tbody>
        </table>

        <div class="ml-page">
            <el-pagination v-model:current-page="currentPage" :page-sizes="[100, 200, 300, 400]" size="small" background
                layout="total, prev, pager, next, jumper" :total="400" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
    </div>
</template>
<style scoped>
.map-list {
    width: 600px;
    height: calc(100% - 32px);
    padding: 24px;
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #387aff7c;
    cursor: pointer;
    overflow: hidden;
}

table {
    width: 100%;
    line-height: 50px;
    text-align: center;
    overflow: hidden;
}

thead {
    background-color: #F5F7FA;
}

tr {
    border-bottom: 1px solid #F5F7FA;
}

.ml-page {
    width: 100%;
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 16px;
    left: 0;
}
</style>